<template>
    <div class="student-info-container">
      <el-row class="student-info-header">
        <el-col :span="24">
          <h2>学生基本信息</h2>
        </el-col>
      </el-row>
      <el-row class="student-info-content">
        <el-col :span="12" class="info-item">
          <span class="label">学号:</span>
          <span class="value">{{ student.studentId }}</span>
        </el-col>
        <el-col :span="12" class="info-item">
          <span class="label">姓名:</span>
          <span class="value">{{ student.name }}</span>
        </el-col>
      </el-row>
      <el-row class="student-info-content">
        <el-col :span="12" class="info-item">
          <span class="label">入学时间:</span>
          <span class="value">{{ student.enrollmentYear }}</span>
        </el-col>
        <el-col :span="12" class="info-item">
          <span class="label">年级:</span>
          <span class="value">{{ student.grade }}</span>
        </el-col>
      </el-row>
      <el-row class="student-info-content">
        <el-col :span="12" class="info-item">
          <span class="label">专业:</span>
          <span class="value">{{ student.department }}</span>
        </el-col>
        <el-col :span="12" class="info-item">
          <span class="label">联系方式:</span>
          <span class="value">{{ student.contactInfo }}</span>
        </el-col>
      </el-row>
  
      <!-- 添加额外的空白行以增加间隔 -->
      <el-row>
        <el-col :span="24">
          <div style="height: 100px;"></div>
        </el-col>
      </el-row>
  
      <!-- 学生成绩信息 -->
      <el-row class="student-info-header">
        <el-col :span="24">
          <h2>学生成绩信息</h2>
        </el-col>
      </el-row>
      <el-row class="student-info-content">
        <el-col :span="12" class="info-item">
          <span class="label">学业成绩:</span>
          <span class="value">{{ score.acScore }}</span>
        </el-col>
        <el-col :span="12" class="info-item">
          <span class="label">学位课数量:</span>
          <span class="value">{{ score.acCount }}</span>
        </el-col>
      </el-row>
      <el-row class="student-info-content">
        <el-col :span="12" class="info-item">
          <span class="label">思政表现分:</span>
          <span class="value">{{ score.ideologyScore }}</span>
        </el-col>
        <el-col :span="12" class="info-item">
          <span class="label">科研能力分:</span>
          <span class="value">{{ score.creatScore }}</span>
        </el-col>
      </el-row>
      <el-row class="student-info-content">
        <el-col :span="12" class="info-item">
          <span class="label">社会服务分:</span>
          <span class="value">{{ score.serScore }}</span>
        </el-col>
        <el-col :span="12" class="info-item">
          <span class="label">社会附加分:</span>
          <span class="value">{{ score.fujScore }}</span>
        </el-col>
      </el-row>
      <el-row class="student-info-content">
        <el-col :span="12" class="info-item">
          <span class="label">加权总成绩:</span>
          <span class="value">{{ score.total }}</span>
        </el-col>
      </el-row>
      <el-row class="button-row">
      <el-col :span="24">
        <el-button type="primary" @click="showScoringDetails">查看评分细则</el-button>
      </el-col>
    </el-row>
    <el-row class="button-row">
      <el-col :span="24">
        <el-button type="primary" @click="showPasswordModal">修改密码</el-button>
      </el-col>
    </el-row>
     <!-- 修改密码模态框 -->
     <el-dialog title="修改密码" :visible.sync="passwordModalVisible" width="30%" top="200px">
      <el-form :model="passwordForm" ref="passwordForm" label-width="100px" class="password-form">
        <el-form-item label="新密码">
          <el-input type="password" v-model="passwordForm.newPassword" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码">
          <el-input type="password" v-model="passwordForm.confirmPassword" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="passwordModalVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatePassword">确 定</el-button>
      </div>
    </el-dialog>

    


    <!-- 评分细则模态框 -->
    <el-dialog title="评分细则" :visible.sync="scoringDetailsVisible" width="50%" top="200px">
      <div v-if="rules" style="font-size: 18.5px; line-height: 2;">
      <p>入学年份:{{ student.enrollmentYear }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年级:{{ student.grade }}&nbsp;&nbsp;&nbsp;评分细则如下：</p>
      <p>发布年份:</p>
      <p>{{ rules.year }}</p>
      <p>评定年级:</p>
      <p>{{ rules.grade }}</p>
      <p>说明:</p>
      <p>{{ rules.description }}</p>
    </div>
    </el-dialog>
    </div>
  </template>
  
  <script>
import request from '../../utils/request';

  export default {
    created(){
        this.load()
    },
    data() {
      return {
        scoringDetailsVisible: false,
        passwordModalVisible:false,
        student: {
          studentId: '123456',
          name: '张三',
          enrollmentYear: '2020-09-01',
          grade: '大二',
          department: '计算机科学与技术',
          contactInfo: '13800138000',
         
        },
        score: {
          acScore: '',
          acCount: '',
          ideologyScore: '',
          creatScore: '',
          serScore: '',
          fujScore: '',
        },
        rules: {
          year: '',
          grade: '',
          description: '',
        },
        passwordForm:{

        },
        form:{

        }

      };
    },
    methods:{
      load(){
        request.get("/students/message").then(res =>{
          console.log(res)
          this.score = res.data.score
          this.student = res.data.student
          this.rules = res.data.rules
          if(res.data.code === 401){
            this.$message.error({
              
              message: res.data.msg,
              
             })
             this.$router.push("/slogin")
          }
        
        })
      },
      showScoringDetails(){
        this.scoringDetailsVisible = true
      },
      showPasswordModal() {
      this.passwordModalVisible = true;
    },
    updatePassword(){
       if (this.passwordForm.newPassword !== this.passwordForm.confirmPassword) {
        this.$message.error('两次输入的密码不一致，请重新输入')
      }else{
        this.form.userId = this.student.studentId
        this.form.passwd = this.passwordForm.newPassword
        this.form.userRole = 2
        request.post('/Admin/updatepwd',this.form).then(res => {
          if(res.data.code === 0){
                this.$message({
                    message: res.data.msg,
                    type: 'success'
            })
            this.passwordModalVisible =false
            }else{
                this.$message.error({
            
                 message: res.data.msg,
            
           })
            }
        })
      }
   
    }
    }
  };
  </script>
  
  <style scoped>
  .student-info-container {
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  .student-info-header {
    margin-bottom: 20px;
  }
  .info-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .label {
    font-weight: bold;
    margin-right: 10px;
  }
  .value {
    color: #333;
  }
  .button-row {
  margin-top: 20px;
  text-align: center;
}
  </style>